/*
******* Dialogs *******
*/

#virtualKeyboard {
  position: absolute !important;
  margin: auto 10px !important;
  top: 0;
  bottom: 0;
  right: 50%;
}

.dialog {
  /* IE does not center unless we specific width 100% */
  width: 100%;
  width: calc(100% - 40px);
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: auto;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background-color: #F2F4F5;
}

.dialog.keyboard {
  left: 50%;
  margin: auto 10px;
}

.dialogContent {
  padding: 20px;
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.dialogContent > :first-child,
.dialogContent > > :first-child {
  margin-top: 0;
}

.buttonsFixed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid #B7B7B7;
}

.dialogLeftPane, .dialogRightPane {
  padding: 20px;
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.dialogLeftPane.dialogBottomPane, .dialogRightPane.dialogBottomPane {
  top: 100px;
}

.dialogLeftPane {
  left: 0;
  width: 35%;
  border-right: 1px solid #B7B7B7;
  box-sizing: border-box;
}

.dialogRightPane {
  left: 35%;
  right: 0;
  background-color: #FFF;
}

.dialogTopPane {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  border-bottom: 1px solid #B7B7B7;
  box-sizing: border-box;
}

/*
******* Dialog Header *******
*/

.dialogHeader {
  background-color: #D22D27;
  color: #FFF;
  font-weight: 600;
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
}

.dialogHeaderInner {
  line-height: 50px;
  height: 50px;
}

.dialogHeader.icon > .dialogHeaderInner {
  background-image: url('images/vault_4.0/LastPass_White.png');
  background-position:  right center;
  background-repeat: no-repeat;
}

.dialogHeader.icon.leftIcon {
  text-align: right;
}

.dialogHeader.icon.leftIcon > .dialogHeaderInner {
  background-position: left center;
}

.dialogHeader.dialogHeaderButtonsEnabled.icon.titleEnabled > .dialogHeaderInner {
  background-position: center center;
}

.dialogHeaderButtons {
  position: absolute;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
}

.dialogHeaderButton {
  width: 25px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.dialogCloseButton {
  background-image: url('images/vault_4.0/Dialog_Close.png');
}

.dialogMaximizeButton {
  background-image: url('images/vault_4.0/Dialog_Maximize.png');
}

.dialogText {
  margin-top: 10px;
}

.dialogText:first-child {
  margin-top: 0;
}

/*
******* Window dialog settings *******
*/

.dialog.maximized,
.dialog.dialogWindow.responsive {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}

.dialog.dialogWindow {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: auto !important;
}

/*
******* Buttons *******
*/

.buttons .nbtn {
  vertical-align: top;
  min-width: 0;
}

.buttons {
  padding: 10px 16px 10px 16px;
}

.rightButtons {
  text-align: right;
}

.centerButtons {
  text-align: center;
}

.dynamicWidth {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.focusCycler {
  position: absolute;
  height: 1px;
  width: 1px;
}

.leftButton {
  float: left;
}

/*
* Ensure any two button container does not
*/
.nbtn:first-child:nth-last-child(2),
.nbtn:first-child:nth-last-child(2) ~ .nbtn {
  max-width: calc(50% - 40px);
}

/*
******* Checkboxes *******
*/

/*
* This hides the checkbox but maintains focus functionality
*/
.checkbox, .favButton {
  position: absolute;
  opacity: 0;
}

.checkbox + label {
  padding: 4px 4px 4px 25px;
  background-image: url('images/vault_4.0/Uncheck_Modal.png');
  background-repeat: no-repeat;
  background-position: 4px center;
  height: 16px;
  line-height: 16px;
  display: inline-block;
  position: relative;
}

.checkbox + label.noText {
  padding-left: 16px;
}

.checkbox:focus + label::before {
  content: "";
  height: 16px;
  width: 16px;
  display: block;
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #84B7F8;
  outline: 1px solid #CCE0FD;
}

.checkbox:checked + label, .checkboxContainer.selected > label {
  background-image: url('images/vault_4.0/Check_Modal.png');
}

.checkbox:disabled + label{
  background-image: url('images/vault_4.0/Disabled.png');
}

.checkbox:checked:disabled + label{
  background-image: url('images/vault_4.0/Checked_Disabled.png');
}

.checkboxContainer {
  margin-top: 5px;
  font-size: 15px;
}

/*
******* Radio Buttons *******
*/

.radio {
  position: absolute;
  opacity: 0;
}

.radio + label {
  padding-left: 25px;
  background-image: url('images/vault_4.0/Radial_Empty.png');
  background-repeat: no-repeat;
  background-position: left center;
  height: 21px;
  line-height: 21px;
  display: inline-block;
  position: relative;
}

.radio:checked + label{
  background-image: url('images/vault_4.0/Radial_Filled.png');
}

.radio:focus + label::before {
  content: "";
  height: 21px;
  width: 21px;
  display: block;
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid #84B7F8;
  border-radius: 50%;
}

/*
******* Dropdowns *******
*/

.selectDropdownList {
  left: 0;
  right: 0;
  border-color: #AAB2BD;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  overflow: auto;
  max-height: 171px;
}

.selectDropdownList.dropdownMenu li {
  padding-left: 10px;
  border-top: 1px solid #E5E8ED;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.selectDropdownList.dropdownMenu .hover {
  background-color: #E6E9ED;
}

.dropdownMenu {
  z-index: 1;
}

.contextMenu {
  z-index: 100;
}

.dropdownButton {
  width: 30px;
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-left: 1px solid #A7AFBA;
  background-image: url('images/vault_4.0/Folder_Dropdown.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #FFF;
}

.relative {
  position: relative;
}

.dropdownContainer {
  position: relative;
}

.dropdownHint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFF;
}

.dropdownHint > span {
  opacity: .6;
}

.dialogInput.selectDropdown, .dialogInput.typeaheadDropdown {
  position: relative;
  background-image: url('images/vault_4.0/Folder_Dropdown.png');
  background-position: right center;
  background-repeat: no-repeat;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 35px;
  background-color: #FFF;
  border-radius: 0;
}

.dialogInput.selectDropdown.dropdownDisabled, .dialogInput.typeaheadDropdown.dropdownDisabled {
  background-image: none;
}

.dialogInput.typeaheadDropdown {
  background-color: transparent;
}

.dialogInput.searchInput {
  background-size: 16px;
  padding-left: 30px;
}

/*
******* Input Buttons *******
*/

.dialogInputButton:hover {
  background-color: #22303A;
}
.dialogInputButton {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  color: #FFF;
  background-color: #3C4A54;
  border: none;
  padding: 0 5px;
}

/*
******* Inputs *******
*/

.showPassword,
.generatePassword {
  width: 18px;
  height: 100%;
  background-image: url('images/vault_4.0/Eye_Show.png');
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: 5px;
  top: 0;
}

.showPassword.selected {
  background-image: url('images/vault_4.0/Eye_Hide.png');
}

.generatePassword {
  background-image: url('images/vault_4.0/Generate.png');
  display: none;
}

.empty > .showPassword {
  display: none;
}

.empty > .generatePassword {
  display: block;
}

.dialogInput {
  font-size: 16px;
  height: 30px;
  padding: 0 5px 0 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #A7AFBA;
  box-sizing: border-box;
  width: 100%;
  color: #000;
  background-color: #FFF;
}

/*
* Hide default clear/show passord buttons in IE
* to maintain consistent look and feel
*/
.dialogInput::-ms-clear,
.dialogInput::-ms-reveal,
.dialogInput::-ms-expand {
  display: none;
}

.dialogInput.password, .passwordDropdownContainer {
  font-family: Monaco,Consolas, Courier;
}

.dialogInput[size] {
  width: auto;
}

.dialogInput:focus {
  border-color: #84B7F8;
  outline: 1px solid #CCE0FD;
}

textarea.dialogInput {
  height: 100%;
  min-height: 120px;
  resize: vertical;
  overflow: auto;
  padding: 5px;
}

textarea.dialogInput.responsiveTextArea {
  height: auto;
}

.dialogInputOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(225, 225, 225, .7);
}

.dialogInput[disabled] {
  color: #909090;
  background-color: #F7F7F7;
}

/*
******* Search Input *******
*/

.searchInput {
  padding-left: 45px;
  background-image: url("images/vault_4.0/Search.png");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.searchCloseButton {
  display: none;
  cursor: pointer;
  background: url("images/vault_4.0/Search_Close.png") center center no-repeat;
  position: absolute;
  width: 40px;
  left: 0;
  top: 0;
  bottom: 0;
}

.searchInputContainer {
  position: relative;
}

.searchInputContainer.populated .searchCloseButton {
  display: block;
}

.searchInputContainer.populated .searchInput {
  background-image: none;
}

.searchCloseButton.inputDialog {
  width: 30px;
  background-size: 16px;
}

/*
******* Tables *******
*/

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 0 20px 0 20px;
}

.twoColumn {
  width: 50%;
  float: left;
  box-sizing: border-box
}

.twoColumn.leftColumn {
  padding-right: 10px;
}

.twoColumn.rightColumn {
  padding-left: 10px;
}

.label {
  font-weight: 600;
  margin: 20px 0 5px 0;
  display: block;
}

.label.first:first-child {
  margin-top: 0;
}

.dialogMargin {
  margin-top: 20px;
}

.settings {
  width: 100%;
  height: 100%;
}

.settingLabel {
  text-align: right;
  padding: 0 20px 0 20px;
  font-weight: 600;
}

.dialogRightPane .settingLabel {
  width: 40%;
}

.setting {
  text-align: left;
}

.helpText {
  width: 150px;
  color: #FFF;
  background-color: #424A54;
  padding: 10px;
  position: absolute;
  right: 20px;
  border-radius: 4px;
}

.settingsContainer h1 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.settingsRow > td, .settingsHeader > th {
  height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #D8D8D8
}

.settingsRow > td:last-child, .settingsHeader > th:last-child {
  border-width: 0;
}

.settingsRow {
  border: 1px solid #D8D8D8;
  margin-bottom: -1px;
  background-color: #FFF;
}

.settingsRow:nth-child(even) {
  background-color: #FBFBFB;
}

.settingsHeader{
  background-color: #515151;
  color: #FFF;
  text-align: center;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #515151;
}

.topAlign {
  vertical-align: top;
}

.noteContent .settingsRow {
  border: none;
  margin: 0;
}

.noteContent td {
  padding: 0;
  height: 100%;
}

/*
******* Top Menu *******
*/

.settingsTopMenu {
  margin-left: 240px;
  cursor: default;
  text-align: left;
}

.settingsTopMenu li {
  display: inline-block;
  vertical-align: top;
  padding: 0 10px 0 10px;
}

.settingsTopMenu li.selected {
  background-color: #AF0809;
  font-weight: 600;
}

/*
******* Left Menu *******
*/

.dialogLeftMenuPane {
  border-right: none;
}

.dialogLeftMenuContainer {
  border-right: 1px solid #B7B7B7;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.dialogLeftMenu {
  background-color: #F6F6F6;
  border: #BDC3CB;
  border-right: 1px solid #BDC3CB;
  cursor: default;
  margin-right: -1px;
}

.dialogLeftMenu ul {
  margin-right: -1px;
}

.dialogLeftMenu li {
  border-bottom: 1px solid #BDC3CB;
  border-right: 1px solid #BDC3CB;
  line-height: 40px;
  padding-left: 20px;
  margin-right: -1px;
  cursor: pointer;
}

.dialogLeftMenu li.selected {
  background-color: #FFF;
  border-right: none;
  color: #D62D27;
}

.dialogLeftMenu li.error {
  background-image: url('images/vault_4.0/Input_Error.png');
  background-position: 95% center;
  background-repeat: no-repeat;
}

.leftMenuOptions {
  margin-left: 20px;
}

.dialogLeftMenuView {
  display: none;
}

table.dialogLeftMenuView.selected {
  display: table;
}

div.dialogLeftMenuView.selected {
  display: block;
}


/*
******* Errors *******
*/

.errorContainer {
  position: relative;
}

.dialogInput.errorInput {
  border-color: #D83F3F;
  background-color: #FFF6F6;
  background-image: url('images/vault_4.0/Input_Error.png');
  background-position: 5px center;
  background-repeat: no-repeat;
  padding-left: 23px;
}

.dialogError span {
  font-weight: 600;
}

.dialogError p {
  margin-bottom: 5px;
}

.dialogErrorWrapper {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  display: none;
  z-index: 1;
}

.dialogErrorWrapper.alignTop {
  top: auto;
  bottom: 100%;
}

.dialogErrorWrapper.staticError {
  position: static;
}

.dialogError {
  background-color: #474747;
  color: #FFF;
  padding: 10px 10px 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.errorTooltip {
  height: 5px;
  background: url('images/vault_4.0/Tooltip.png') 20px top no-repeat;
  position: relative;
}

.dialogErrorWrapper.alignTop .errorTooltip {
  background: url('images/vault_4.0/Tooltip_Top.png') 20px top no-repeat;
  margin-top: -1px;
  height: 6px;
}

/*
******* Date Inputs *******
*/

.dateInputMonth {
  width: 50%;
  display: inline-block;
}

.dateInputDay {
  width: 15%;
  margin-left: 5%;
}

.dateInputYear {
  width: 25%;
  margin-left: 5%;
}

.monthYearDate .dateInputMonth {
  width: 70%;
}

/*
******* Confirmation/Alert Dialog *******
*/

#confirmationDialog, #alertDialog {
  max-width: 500px;
}

#confirmationDialog .dialogContent,
#alertDialog .dialogContent {
  padding-bottom: 0;
}

#confirmationDialog .buttonsFixed,
#alertDialog .buttonsFixed {
  border-top: none;
}

/*
******* Credit Monitoring Confirmation *******
*/

.settings.creditMonConfirm {
  table-layout: fixed;
  margin-top: 10px;
}

.settings.creditMonConfirm td {
  width: 50%;
}

/*
******* Sharing Errors Dialog *******
*/

.sharingErrorsDialog {
  margin-top:20px;
  background-color: #fff;
}

.sharingErrorsDialog th {
  color: #fff;
  background-color: #D62D27;
  padding: 5px 20px;
  text-align: left;
  border: 1px solid #fff;
  white-space: nowrap;
}

.sharingErrorsDialog td {
  text-align:left;
  border: 1px solid #ccc;
}

.sharingErrorsDialog tr:nth-child(odd) {
   background-color: #eee;
}

/*
******* Sharing Keys Dialog *******
*/

#sharingKeyDialog {
  max-width: 800px;
}

/*
******* Upgrade Premium Dialog *******
*/

#upgradePremiumDialog {
  max-width: 700px;
}

#upgradePremiumDialog .dialogContent {
  padding-bottom: 0;
}

/*
******* Enterprise Trial *******
*/

#enterpriseTrialDialog {
  max-width: 700px;
}

#enterpriseTrialDialog p {
  margin-top: 10px;
}

#enterpriseTrialDialog .dialogContent {
  padding-bottom: 0;
}

.imageContainer {
  margin-top: 20px;
  text-align: center;
}

/*
******* Deny Emergency Access *******
*/

#denyEmergencyAccessDialog {
  max-width: 700px;
}

/*
******* Add Emergency Access *******
*/

#addEmergencyAccessDialog {
  max-width: 700px;
}

/*
******* Enable Binary Component *******
*/

#enableBinaryDialog {
  max-width: 700px;
}

#enableBinaryDialog .dialogContent, #verifyEmailDialog .dialogContent {
  padding-top: 10px;
}

#enableBinaryDialog p, #verifyEmailDialog p {
  margin-top: 10px;
}

#enableBinaryDialog .rbtn, #verifyEmailDialog .rbtn, #enterpriseTrialDialog .rbtn {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

#verifyEmailDialog {
  max-width: 600px;
}

/*
******* Form Field / Save All Entered Data View *******
*/

.mainView {
  height: 100%;
}

.saveAllFields, .fieldsTable {
  table-layout: fixed;
}

.fieldsTable th,
.fieldsTable td,
.saveAllFields td {
  width: 50%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.saveAllFields {
  display: none;
}

.dialog.saveAll .saveAllFields {
  display: table;
}

.dialog.saveAll .hideSaveAll {
  display: none;
}

.fieldsLabel {
  display: none;
}

.dialog.saveAll .fieldsLabel {
  display: block;
}

.dialog.saveAll .odd  {
  background-color: #FFF;
}

.addButton.addFormFieldButton {
  margin-bottom: 0;
}

.formFieldsView {
  display: none;
  background-color: #FFF;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  overflow: auto;
}

.formFieldValue {
  position: relative;
}

.formFieldValue > div {
  margin-right: 30px;
}

#addFormFieldDialog {
  max-width: 400px;
  max-height: 435px;
}

#addFormFieldDialog .dialogContent {
  overflow: visible;
}

/*
******* Application Dialog *******
*/

#applicationDialog {
  min-height: 215px;
  max-width: 800px;
  min-width: 485px;
}

/*
******* Change Password Dialog *******
*/

#vaultItemSelectDialog, #changePasswordDialog {
  max-width: 400px;
}

.vaultItemSelectDialogContainer {
  margin-top: 20px;
}

/*
******* Invite Friends Dialog *******
*/

#inviteFriendsDialog {
  max-width: 600px;
  max-height: 400px;
}

#inviteFriendsDialogContainer {
  margin-top: 20px;
}

/*
******* Wait Dialog *******
*/

#waitDialog {
  max-width: 300px;
}

#waitDialog .dialogContent {
  padding-top:10px;
  padding-bottom:0;
}

#waitDialogContainer {
  text-align:center;
}

#waitDialogImg{
  margin-top: 25px;
}


/*
******* Overlays *******
*/

.dialogState #dialogOverlay {
  display: block;
}

.dialogInProcessOverlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .5);
  background-image: url('images/vault_4.0/Loading.gif');
  background-position: center center;
  background-repeat: no-repeat;
}

.inProcess > .dialogInProcessOverlay {
  display: block;
}

.dialogBlurOverlay,
.tab .dialogWindow .dialogBlurOverlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(51, 51, 51, .5);
  z-index: 1;
}

.tab .dialogBlurOverlay {
  background-color: rgba(255, 255, 255, .8);
}

.blurred > .dialogBlurOverlay,
.tab .dialogWindow.blurred > .dialogBlurOverlay {
  display: block;
}

/*
******* Advanced Options *******
*/

.advancedOptionsLabel {
  background-image: url('images/vault_4.0/Advanced_Closed.png');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 15px;
  cursor: pointer;
}

.advancedOptionsLabel.open {
  background-image: url('images/vault_4.0/Advanced_Open.png');
}

.advancedOptions {
  display: none;
}

/*
******* Action Buttons *******
*/

.centerItemButtons .itemButton {
  margin-left: 5px;
}

.centerItemButtons .itemButton:first-child {
  margin-left: 0;
}

.rightItemButtons {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 26px;
}

.dialogItemButtons {
  position: absolute;
  left: 20px;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 29px;
}

.dialogItemButtons .itemButton  {
  background-color: #FFF;
  height: 29px;
  width: 29px;
  border: 1px solid #B8BFD1;
  margin-right: 5px;
}

.favButtonLabel {
  background-image: url('images/vault_4.0/Favorite.png');
}

.favButton:checked + .favButtonLabel{
  background-image: url('images/vault_4.0/Favorite_Selected.png');
}

.actionButtonContainer {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.actionCell {
  padding: 0;
  position: relative;
  background-color: #FFF;
}

.actionCell .itemButton {
  border: 1px solid #C7C7C7;
}

/*
******* Loading Overlay *******
*/

#dialogLoadingOverlay {
  background-color: rgba(255, 255, 255, .3);
  background-image: url('images/vault_4.0/Loading.gif');
  background-position: center center;
  background-repeat: no-repeat;
}

.dialogLoading #dialogLoadingOverlay {
  display: block;
}

/*
******* Help Buttons *******
*/

.help {
  background: url("images/icon-help-white.png") no-repeat center center;
  cursor: pointer;
}

.help:hover {
  background-color: rgba(255, 255, 255, .15);
}
